<template>
    <div class="container">
        <h1>上传 Excel 文件</h1>
        <button class="button-primary" @click="uploadIncidentFile">上传 Incident.excel 文件</button>
        <input type="file" ref="incidentFile" @change="handleIncidentFileUpload" accept=".xlsx, .xls" style="display: none;" />
        
        <button class="button-secondary" @click="uploadRequestFile">上传 Request.excel 文件</button>
        <input type="file" ref="requestFile" @change="handleRequestFileUpload" accept=".xlsx, .xls" style="display: none;" />
    </div>
</template>

<script>
import * as XLSX from 'xlsx';
import axios from 'axios';

export default {
    methods: {
        uploadIncidentFile() {
            this.$refs.incidentFile.click(); // 触发文件选择
        },
        handleIncidentFileUpload(event) {
            const file = event.target.files[0];
            if (file) {
                this.readExcelFile(file, 'incidents');
            }
        },
        uploadRequestFile() {
            this.$refs.requestFile.click(); // 触发文件选择
        },
        handleRequestFileUpload(event) {
            const file = event.target.files[0];
            if (file) {
                this.readExcelFile(file, 'requests');
            }
        },
        readExcelFile(file, type) {
            const reader = new FileReader();
            reader.onload = (e) => {
                const data = new Uint8Array(e.target.result);
                const workbook = XLSX.read(data, { type: 'array' });
                const sheetName = workbook.SheetNames[0]; // 读取第一个工作表
                const worksheet = workbook.Sheets[sheetName];
                const jsonData = XLSX.utils.sheet_to_json(worksheet, { raw: false }); // 转换为 JSON

                // 处理日期格式
                jsonData.forEach(record => {
                    // 处理 'Opened' 列
                    if (record.Opened) {
                        record.Opened = this.formatDate(record.Opened);
                    } else {
                        record.Opened = null; // 保留空值
                    }
                    // 处理 'Resolved' 列（如果存在）
                    if (record.Resolved) {
                        record.Resolved = this.formatDate(record.Resolved);
                    } else {
                        record.Resolved = null; // 保留空值
                    }
                });

                // 发送数据到后端
                this.sendDataToServer(jsonData, type);
            };
            reader.readAsArrayBuffer(file);
        },
        formatDate(dateString) {
            // 将日期字符串转换为 Date 对象
            const date = new Date(dateString);
            if (isNaN(date.getTime())) {
                return null; // 返回 null 以表示无效日期
            }
            // 格式化为 'YYYY/MM/DD HH:mm:ss'
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            const seconds = String(date.getSeconds()).padStart(2, '0');

            return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`; // 返回格式化后的日期字符串
        },
        async sendDataToServer(data, type) {
            const url = type === 'incidents' ? 'http://localhost:3000/api/incidents' : 'http://localhost:3000/api/requests'; // 使用完整的 URL
            try {
                const response = await axios.post(url, data);
                console.log('数据上传成功:', response.data);
                alert('数据上传成功');
            } catch (error) {
                // 提供更详细的错误信息
                if (error.response) {
                    console.error('数据上传失败:', error.response.data);
                    alert(`数据上传失败: ${error.response.data.message || error.message}`);
                } else if (error.request) {
                    console.error('没有收到响应:', error.request);
                    alert('没有收到响应，请检查服务器是否正常运行');
                } else {
                    console.error('请求错误:', error.message);
                    alert(`请求错误: ${error.message}`);
                }
            }
        }
    }
};
</script>

<style scoped>
/* 容器样式 */
.container {
    background-color: white; /* 白色背景 */
    border-radius: 10px; /* 圆角 */
    padding: 20px; /* 内边距 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加阴影 */
    text-align: center; /* 文字居中 */
    max-width: 400px; /* 最大宽度 */
    margin: 50px auto; /* 垂直和水平居中 */
}

/* 按钮通用样式 */
.button-primary, .button-secondary {
    border: none; /* 无边框 */
    border-radius: 5px; /* 圆角 */
    padding: 10px 20px; /* 内边距 */
    font-size: 16px; /* 字体大小 */
    margin: 10px 0; /* 外边距 */
    cursor: pointer; /* 鼠标悬停样式 */
    color: white; /* 文字颜色 */
    transition: background-color 0.3s ease; /* 背景颜色过渡动画 */
}

/* 深蓝色按钮 */
.button-primary {
    background-color: #003366; /* 深蓝色 */
}

.button-primary:hover {
    background-color: #002a52; /* 悬停时更深的蓝色 */
}

/* 浅蓝色按钮 */
.button-secondary {
    background-color: #0077cc; /* 浅蓝色 */
}

.button-secondary:hover {
    background-color: #0066b3; /* 悬停时更深的蓝色 */
}
</style>